<template>
  <div id="recommend">
    <h1>推荐榜</h1>
    <section class="songBox">
      <template v-for="item in recommendData">
        <router-link :to="`/playlist/${item.id}`" :key="item.id">
          <div class="imgbox">
            <img :src="item.picUrl" />
          </div>
          <p>{{ item.name }}</p>
          <span>{{ item.playCount | myformat }}</span>
        </router-link>
      </template>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recommendData: []
    }
  },
  async mounted() {
    this.recommendData = JSON.parse(sessionStorage.getItem('recom'))
    if (!this.recommendData) {
      this.recommendData = await this._fetch("/personalized", { limit: 6 });
      this.recommendData = this.recommendData.result
      sessionStorage.setItem('recom', JSON.stringify(this.recommendData))
    }

  },
  filters: {
    myformat(val) {
      if (val < 10000) {
        return val
      } else {
        return (val / 1000).toFixed(1) + "万"
      }
    }
  }
};
</script>

<style lang="scss" >
@import "../../assets/scss/_vw.scss";
h1 {
  font-size: _vw(20);
  border-left: 2px solid red;
  font-weight: normal;
  margin: _vw(12) 0;
  padding-left: _vw(10);
}
.songBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  text-overflow: ellipsis;
  overflow: hidden;

  a {
    width: 32vw;
    color: black;
    font-size: _vw(10);
    height: 45vw;

    position: relative;
    img {
      width: 100%;
    }
    p {
      overflow: hidden;

      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    span {
      color: white;
      position: absolute;
      top: _vw(7);
      right: _vw(5);
    }
  }
}
</style>